<template>
	<view class="content">

		<!-- 导航栏 -->
		<search-navbar />

		<!-- 轮播 -->
		<view class="wrap" v-if="list.length>0">
			<u-swiper :list="list" mode="rect" :effect3d="false" name="url" @click="bannerUrl"></u-swiper>
		</view>

		<!-- 栅格系统 -->
		<u-grid col="4" class="category" :border="false" v-if="categoryarray">
			<u-grid-item :key="key" v-for="(item,key) in categoryarray" @click="goodUrl(item.id)">
				<image :src="categoryList[key].img" class="category-img"></image>
				<view class="grid-text">{{item.catgoryName}}</view>
			</u-grid-item>
		</u-grid>


		<!-- 广告 -->
		<image class="adv" mode="widthFix" src="/static/adv.jpg" v-if="false"></image>

		<!-- 优惠专区 discount -->
		<!-- <view class="discount">
			<text class="discount-title">优惠专区</text>
			<view class="u-flex">
				<view class="left">
					<text class="main-title">整点秒杀</text>
					<text class="sub-title">整天秒杀专区</text>
					<image src="../../static/s1.jpg" class="cover" mode="widthFix"></image>
					<text class="u-link">点击进入</text>
				</view>
				<view class="right">
					<text class="main-title">限时抢购</text>
					<text class="sub-title">每天23点上线</text>
					<image src="../../static/s1.jpg" class="cover" mode="widthFix"></image>
					<text class="u-link">点击进入</text>
				</view>
				<u-count-down :timestamp="timestamp"></u-count-down>
			</view>
		</view> -->

		<!-- 猜你喜欢 -->
		<view class="like-box" v-if="goodsList.length">
			<text class="main-title">
				好物推荐
			</text>
			<u-row gutter="16" class="goods-list">
				<u-col span="6" :key="item" v-for="(item) in goodsList" class="goods-item-box"
					@click="pathUrl(item.id)">
					<view class="goods-item">
						<image :src="item.image.split(',')[0]" class="goods-cover"></image>
						<text class="text">{{item.name}}</text>
						<view class="goods-info">
							<text class="price">￥{{item.price}}</text>
							<text class="sale-number" style="font-size: 10upx;">100人付款</text>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-modal :value="indexImgurl.length" :showTitle="false" :showConfirmButton="false" :showCancelButton="false"
			:content='content' @cancel='cancel' class="modal" :maskCloseAble="true">
			<image :src="indexImgurl[0].url" mode="widthFix" ref="openimage" style="width: 100%;"></image>
		</u-modal>
	</view>
</template>

<script>
	import searchNavbar from '@/components/search-navbar.vue';

	export default {
		data() {
			return {
				Openscreen: false,
				title: '标题',
				goodsList: [],
				content: 'uView的目标是成为uni-app生态最优秀的UI框架',
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				pageData: {
					PageIndex: 1,
					PageSize: 10,
					Key: '',
					BrandId: '00000000-0000-0000-0000-000000000000',
					CatgoryId: '00000000-0000-0000-0000-000000000000',
					Sorting: ''
				},
				// 分类菜单
				categoryList: [
					{img:''}
				],
				indexImgurl:'',
				timestamp: 86000,
				categoryarray: [],
				total:0
			}
		},
		onLoad() {
			this.checkNetwork()
			this.GetToken()
			// 获取轮播
			this.GteBanner('list',0,1)
			// 获取开屏广告
			this.GteBanner('indexImgurl',2,1)
		},
		onPullDownRefresh() {
			this.pageData.PageIndex=1
			this.GetToken()
		},
		onReachBottom() {
			if(this.total==this.goodsList.length){
				this.pageData.PageIndex=1
				this.GetToken()
			}
		},
		methods: {
			checkNetwork() {
				this.fun.checkNetwork()
			},
			// 获取token
			GetToken() {
				let dataA = {
					Account: '13500000019',
					Password: 'yjsp@806808'
				}
				this.$ajax.sysLogin(dataA).then(res => {
					uni.setStorageSync('productToken', res.data.token)
					this.GetProductList()
					this.getallcategory()
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取产品列表
			GetProductList() {
				this.$ajax.GetProductList(this.pageData).then(res => {
					this.total=0
					this.goodsList =this.pageData.PageIndex==1?[...res.data]:[this.goodsList,...res.data]
					uni.stopPullDownRefresh()
				})
			},
			// 打开弹窗
			open() {
				this.Openscreen = true
				this.getHeight()
			},
			// 获取分类
			getallcategory() {
				this.$ajax.getallcategory({
					ParentId: '00000000-0000-0000-0000-000000000000'
				}).then(res => {
					this.categoryarray = res.data
				})
			},
			// 关闭弹窗
			cancel() {
				this.Openscreen = false
			},
			// 跳转商品列表
			goodUrl(id) {
				uni.navigateTo({
					url: `/pages/good/goodsList/goodsList?id=${id}`
				})
			},
			// 跳转详情
			pathUrl(id) {
				uni.navigateTo({
					url: `/pages/good/product/product?id=${id}`
				})
			},
			// 获取轮播图
			GteBanner(api,type,Mold) {
				let data = {
					Type: type,
					Mold: Mold
				}
				this.$ajax.GteBanner(data).then(res => {
					this[api] = res.data
				})
			},
			// 轮播跳转
			bannerUrl(index) {
				let item = this.list[index]
				uni.navigateTo({
					url: item.route
				})
			},
			

		},
		components: {
			searchNavbar
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// padding: 40rpx;
		background-color: #FDFDFD;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}

	.wrap {
		padding: 30rpx;
		width: 100vw;
	}

	.category {
		padding: 0 30upx;
		border: 1upx solid #FDF6EC;
		border-left: none;
		border-right: none;
		margin-bottom: 10upx;
	}

	.category-img {
		width: 55upx;
		height: 55upx;
		margin-bottom: 5upx;
	}

	.adv {
		margin: 10upx 0;
		width: 90%;
	}

	.discount {
		padding: 20upx 50upx;
		width: 100vw;

		.discount-title {
			font-weight: bold;
			font-size: 34upx;

		}

		.discount-cover {
			// height: 100upx;
			width: 150upx;
		}

		.u-flex {
			margin-top: 20upx;

			.cover {
				width: 120upx;
				float: right;
				// height: 80upx;
			}

			.left {
				width: 50%;
				background-color: #EBF9F9;
				padding: 15upx;
				margin-right: 1.5%;
				height: 220upx;
			}

			.right {
				width: 50%;
				background-color: #EBF9F9;
				padding: 15upx;
				height: 220upx;
			}

			.main-title {
				// font-weight: bold;
				font-size: 24upx;
				display: block;
			}

			.sub-title {
				font-size: 10upx;
				color: #C8C9CC;
			}

			.u-link {
				font-size: 18upx;
				display: block;
				position: relative;
				top: 70upx;
			}

			.u-countdown {
				font-size: 24upx;
			}
		}

	}

	.like-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20upx;
		width: 100vw;

		.goods-list {
			width: 100vw;
			padding: 30upx;

			.goods-item-box {
				margin-bottom: 28rpx;
			}

			.goods-item {
				padding: 5upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #FFFFFF;
				border: 1upx solid #FDF6EC;

				.goods-cover {
					width: 100%;
					height: 330rpx;
				}

				.goods-info {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 10upx 20upx;

					.price {
						flex: 1;
						font-weight: bold;
						color: red;
						text-align: left;
					}

					.sale-number {
						flex: 2;
						font-size: 12upx;
						color: #FAB6B6;
						text-align: right;
					}
				}
			}
		}

		.main-title {
			font-weight: bold;
		}
	}
</style>